<template>
	<view class="page">
		<topVue title="我的AI视频作品" :isBack="true"></topVue>
		<view class="main-content">
			<scroll-view class="content" scroll-y @scrolltolower="scrolltolower">
				<view class="box flex-wrap flex-between">
					<view class="w100 flex-column align-center padding-column20" v-if="isEmpty">
						<image src="../../static/empty.png" style="width: 256rpx; height: 256rpx;"></image>
						<text style="color: #81868e;">AI视频作品为空</text>
					</view>
					<view class="boxLi relative" v-for="(item, index) in userVideo" :key="index">
						<view class="videoVue relative">
							<image src="../../static/play.png" style="width: 70rpx; height: 70rpx;z-index: 99;" class="absolute-auto" @click="playVideo(item.videoUrl)"></image>
							<image :src="item.videoUrl + '?x-oss-process=video/snapshot,t_1,f_jpg,w_310,m_fast,ar_auto'" mode="aspectFill" style="width: 100%; max-height:420rpx; border-radius: 12rpx 12rpx 0 0;" v-if="item.videoUrl"></image>
							<view v-else>
								<u-circle-progress active-color="#3B82F6" width="180" :percent="item.progress" bg-color="transparent" class="absolute-center" style="top: 111rpx;"></u-circle-progress>
								<text class="absolute-auto" style="color: #81868e;">{{ item.progress }}%</text>
							</view>
						</view>
						<view class="botVue flex-between align-center relative">
							<text class="line-1" style="padding-right: 30rpx; color: #333;">{{ item.name }}</text> 
							<u-icon name="more-dot-fill" size="32" @click="toOpration(item.id)"></u-icon>
							<view class="inner flex absolute-middle" :style="{left: oprationId === item.id ? 0 : '-10000rpx'}">
								<view class="menu" @click="oprationFun(item, 1)">下载</view>
								<view class="menu" @click="oprationFun(item, 2)">删除</view>
								<view class="menu" @click="oprationFun(item, 3)">{{ item.publiced ? "私密" : "公开"}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 播放视频 -->
		<myVideo ref="myVideo" v-show="isPlay" @quit="isPlay = false"></myVideo>
	</view>
</template>

<script>
	import myVideo from "@/components/myVideo.vue"
	export default {
		components: {
			myVideo
		},
		data(){
			return {
				userVideo: [],
				isEmpty: false,
				pageNum: 0,
				pageSize: 10,
				isLastPage: false,
				oprationId: "",
				isPlay: false
			}
		},
		async onLoad() {
			await this.getUserVideo()
		},
		methods: {
			toOpration(id){
				if(this.oprationId===id) this.oprationId = ""
				else this.oprationId = id
			},
			
			isWeChat() {
			    const userAgent = navigator.userAgent.toLowerCase();
			    return userAgent.includes('micromessenger');
			},
			
			playVideo(videoUrl){
				this.isPlay = true
				this.$refs.myVideo.videoPlay(videoUrl)
			},
			
			oprationFun(item, index){
				switch(index){
					case 1:
						this.oprationId = ""
						console.log("是否是微信浏览器", this.isWeChat())
						if(this.isWeChat()) {
							uni.setClipboardData({
								data: item.videoUrl,
								success() {
									uni.showToast({
										title: "下载链接已复制",
										duration: 2000,
										icon: "none"
									})
								}
							})
						}else {
							window.open(item.videoUrl)
						}
					break;
					
					case 2:
						this.$request("/shuziren/userVideo", {
							id: item.id
						}, "DELETE").then(res=>{
							if(res.code===200) {
								this.oprationId = ""
								this.$u.toast("删除成功")
								this.pageNum = 0
								this.userVideo = []
								this.getUserVideo()
							}
						})
					break;
					
					case 3:
						this.$u.toast("暂未开放")
					break;
				}
			},
			
			// 获取用户AI作品
			async getUserVideo() {
				const res = await this.$request("/shuziren/userVideo/user", {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, "GET")
				if(res.code === 200) {
					this.userVideo = this.userVideo.concat(res.data.content)
					this.isEmpty = this.userVideo.length===0
					this.isLastPage = res.data.page.number == res.data.page.totalPages - 1
					console.log("是否有下一页", this.isLastPage)
				}
				console.log("用户视频制作", this.userVideo)
			},
			
			scrolltolower(){
				console.log("ppp", this.isLastPage)
				if(this.isLastPage) return
				this.pageNum ++
				this.getUserVideo()
			},
		}
	}
</script>

<style lang="less" scoped>
	video::-webkit-media-controls-fullscreen-button {
	    display: none;
	}
	.main-content {
		width: 100%;
		height: calc(100vh - var(--window-bottom) - var(--window-top) - 92rpx);
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #10B981, #3B82F6);
		.content {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			.boxLi {
				width: 310rpx;
				height: 500rpx;
				background: #fff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				.videoVue {
					width: 310rpx;
					height: 420rpx;
				}
				.botVue {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 26rpx;
					background: #f5f5f5;
					padding: 0 20rpx;
					border-radius: 0 0 12rpx 12rpx;
					.inner {
						// background: #fff;
						z-index: 99;
						padding-left: 20rpx;
						.menu {
							width: 70rpx;
							height: 52rpx;
							line-height: 52rpx;
							background: #f5f5f5;
							font-size: 24rpx;
							text-align: center;
							margin: 0 5rpx;
							border-radius: 6rpx;
						}
						.menu:nth-child(1) {
							margin-left: 0rpx;
							background: #48D685;
							color: #fff;
						}
						.menu:nth-child(2) {
							background: #d81e06;
							color: #fff;
						}
						.menu:nth-child(3) {
							background: #3C87EF; 
							color: #fff;
						}
					}
				}
			}
		}
	}
	
</style>